<template>
    <div id="flowContainer1" class="containerMain"></div>
    <div id="flowContainer2" class="containerMain"></div>
    <div id="flowContainer22" class="containerMain"></div>
    <div id="flowContainer3" class="containerMain"></div>
    <div id="flowContainer4" class="containerMain"></div>
    <div id="flowContainer6" class="containerMain"></div>
    <div id="flowContainer7" class="containerMain"></div>
    <div id="flowContainer8" class="containerMain"></div>
    <div id="flowContainer9" class="containerMain"></div>

</template>

<style lang="scss" scoped>
.containerMain {
    position: absolute;
    background-color: rgba(240, 248, 255, 0);
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

/* //第一个电流块 */
#flowContainer1 {
    top: 7%;
    left: 4%;
    width: 43%;
    height: 40%;
    // padding-right: 1em;
    // border: 1px solid #333;
    // &.collapse {
    //     left: 1%;
    padding: 0;
}

#flowContainer2 {
    width: 40%;
    height: 20%;
    top: 20%;
    right: 32%;
}

#flowContainer22 {
    width: 40%;
    height: 20%;
    top: 20%;
    right: 31%;
    // border: 1px solid #333333;
}

#flowContainer3 {
    width: 41%;
    height: 40%;
    top: 14%;
    right: 19%;
    // border: 1px solid #6e1616;
}

#flowContainer4 {
    width: 39%;
    height: 20%;
    top: 45%;
    left: 10%;
    // border: 1px solid #6e1616;
}

#flowContainer6 {       //电网
    width: 40%;
    height: 20%;
    top: 45%;
    right: 11%;
    // border: 1px solid #6e1616;

}

/* //第一个电流块 */
#flowContainer7 {
    bottom: 8%;
    left: 5%;
    width: 43%;
    height: 40%;
    // border: 1px solid #333;
}

#flowContainer8 {
    width: 40%;
    height: 20%;
    bottom: 20%;
    right: 32%;
}

#flowContainer9 {
    width: 50%;
    height: 35%;
    bottom: 16%;
    right: 14%;
}

/* 全屏模式样式 */
@media screen and (display-mode: fullscreen) {
    #flowContainer {
        top: 3%;
        left: 4%;
        width: 41%;
        height: 50%;
    }
    /* //第一个电流块 */
#flowContainer1 {
    // border: 1px solid #333;
        left: 4%;
}
#flowContainer3 {
    right: 18%;
}

}
</style>

<script>
import { onMounted } from 'vue'
import FlowEffectPlugin from './FlowEffectPlugin.js'
// import { fa } from 'element-plus/es/locale/index.js';

export default {
    name: 'FlowEffect',
    setup() {
        onMounted(() => {
            // 确保DOM已经渲染完成
            setTimeout(() => {
                // 创建第一个PV流动效果实例
                const flowEffect1 = new FlowEffectPlugin('flowContainer1', {
                    // === 管道基本设置 ===
                    pipeWidth: 3,      // 管道宽度，单位像素，默认150
                    pipeHeight: 3,      // 管道高度，单位像素，默认15
                    pipeColor: '#003366', // 管道颜色，支持十六进制颜色值，默认#003366
                    // === 流动效果设置 ===
                    flowColor: 'green',  // 流动效果的颜色，支持十六进制颜色值，默认#00ff00
                    flowSpeed: 2,          // 流动速度，值越大速度越快，默认2
                    flowWidth: 1,          // 流动效果的宽度，单位像素，默认8
                    segmentCount: 30,      // 流动效果的段数，默认10
                    segmentLength: 25,     // 每段的长度比例，取值1-100，默认80
                    segmentGap: 2,        // 段间距比例，取值0-100，默认20
                    // === 形状设置 ===
                    shape: 'Z',            // 形状类型，可选 'L' 或 'Z'，默认'L'
                    horizontalLength: 30,  // 水平方向长度，容器宽度的百分比(0-100)，默认50%
                    verticalLength: 25,    // 垂直方向长度，容器高度的百分比(0-100)，默认50%
                    rotationAngle: 0,       // 整体旋转角度，默认0度
                    // === 颜色效果设置 ===
                    brightness: 120,        // 亮度，取值0-200，默认100
                    contrast: 120,          // 对比度，取值0-200，默认100
                    saturation: 120,        // 饱和度，取值0-200，默认100
                    // === 渐变设置 ===
                    gradientDirection: 'forward',  // 渐变方向，可选 'forward' 或 'backward'，默认'forward'
                    energyLength: 5,      // 能量块长度，单位像素，默认50
                    // === 流动方向设置 ===
                    flowDirection: 'forward',// 流动方向，可选 'forward' 或 'backward'，默认'forward'
                    // 翻转
                    flipX: false, // 水平翻转
                    flipY: false  // 垂直翻转    
                });
                // 创建第二个流动效果实例
                const flowEffect2 = new FlowEffectPlugin('flowContainer2', {
                    pipeWidth: 3,
                    pipeHeight: 2,
                    pipeColor: 'green',
                    flowColor: 'white',
                    flowSpeed: 3,
                    flowWidth: 1,
                    segmentCount: 5,
                    segmentLength: 28,
                    segmentGap: 2,
                    shape: 'H',
                    horizontalLength: 15,
                    verticalLength: 140,
                    rotationAngle: 90,
                    brightness: 120,
                    contrast: 120,
                    saturation: 120,
                    gradientDirection: 'forward',
                    energyLength: 20,
                    flowDirection: 'forward',
                    flipX: false,
                    flipY: false
                });
                const flowEffect22 = new FlowEffectPlugin('flowContainer22', {
                    pipeWidth: 3,
                    pipeHeight: 2,
                    pipeColor: 'orange',
                    flowColor: 'white',
                    flowSpeed: 3,
                    flowWidth: 1,
                    segmentCount: 5,
                    segmentLength: 28,
                    segmentGap: 2,
                    shape: 'H',
                    horizontalLength: 15,
                    verticalLength: 140,
                    rotationAngle: 90,
                    brightness: 110,
                    contrast: 110,
                    saturation: 110,
                    gradientDirection: 'backward',
                    energyLength: 20,
                    flowDirection: 'backward',
                    flipX: false,
                    flipY: false
                });
                // 第三风机电流特效
                const flowEffect3 = new FlowEffectPlugin('flowContainer3', {
                    pipeWidth: 3,
                    pipeHeight: 3,
                    pipeColor: '#003366',
                    flowColor: 'green',
                    flowSpeed: 2,
                    flowWidth: 1,
                    segmentCount: 20,
                    segmentLength: 25,
                    segmentGap: 2,
                    shape: 'Z',
                    horizontalLength: 16,
                    verticalLength: 20,
                    rotationAngle: 0,
                    brightness: 120,
                    contrast: 120,
                    saturation: 120,
                    gradientDirection: 'backward',
                    energyLength: 10,
                    flowDirection: 'backward',
                    flipX: false,
                    flipY: true,
                });
                // 第四个电池包电流特效
                const flowEffect4 = new FlowEffectPlugin('flowContainer4', {
                    pipeWidth: 3,
                    pipeHeight: 3,
                    pipeColor: '#003366',
                    flowColor: 'red',
                    flowSpeed: 2,
                    flowWidth: 1,
                    segmentCount: 20,
                    segmentLength: 28,
                    segmentGap: 2,
                    shape: 'H',
                    horizontalLength: 40,
                    verticalLength: 50,
                    rotationAngle: 0,
                    brightness: 110,
                    contrast: 110,
                    saturation: 110,
                    gradientStartColor: 'red',  // 渐变开始颜色，支持十六进制颜色值
                    gradientEndColor: 'red',    // 渐变结束颜色，支持十六进制颜色值
                    energyLength: 20,
                    gradientDirection: 'backward',
                    flowDirection: 'backward',
                    flipX: false,
                    flipY: false
                });
                // 第六个右中电流电流特效
                // 电池包电流特效
                const flowEffect6 = new FlowEffectPlugin('flowContainer6', {
                    pipeWidth: 3,
                    pipeHeight: 3,
                    pipeColor: '#003366',
                    flowColor: 'red',
                    flowSpeed: 2,
                    flowWidth: 1,
                    segmentCount: 20,
                    segmentLength: 30,
                    segmentGap: 2,
                    shape: 'H',
                    horizontalLength: 33,
                    verticalLength: 140,
                    rotationAngle: 0,
                    brightness: 110,
                    contrast: 110,
                    saturation: 110,
                    gradientDirection: 'backward',
                    gradientStartColor: 'red',  // 渐变开始颜色，支持十六进制颜色值
                    gradientEndColor: 'red',    // 渐变结束颜色，支持十六进制颜色值
                    energyLength: 20,
                    flowDirection: 'backward',
                    flipX: false,
                    flipY: false
                });
                // 第七柴发电流特效
                const flowEffect7 = new FlowEffectPlugin('flowContainer7', {
                    // === 管道基本设置 ===
                    pipeWidth: 3,      // 管道宽度，单位像素，默认150
                    pipeHeight: 3,      // 管道高度，单位像素，默认15
                    pipeColor: '#303030', // 管道颜色，支持十六进制颜色值，默认#003366
                    // pipeColor: '#003366', // 管道颜色，支持十六进制颜色值，默认#003366
                    // === 流动效果设置 ===
                    flowColor: 'red',  // 流动效果的颜色，支持十六进制颜色值，默认#00ff00
                    flowSpeed: 2,          // 流动速度，值越大速度越快，默认2
                    flowWidth: 1,          // 流动效果的宽度，单位像素，默认8
                    energyLength: 20,      // 能量块长度，单位像素，默认50
                    segmentCount: 20,      // 流动效果的段数，默认10
                    segmentLength: 30,     // 每段的长度比例，取值1-100，默认80
                    segmentGap:0,        // 段间距比例，取值0-100，默认20
                    // === 形状设置 ===
                    shape: 'Z',            // 形状类型，可选 'L' 或 'Z'，默认'L'
                    horizontalLength: 22,  // 22水平方向长度，容器宽度的百分比(0-100)，默认50%
                    verticalLength: 50,    // 垂直方向长度，容器高度的百分比(0-100)，默认50%
                    rotationAngle: 0,       // 整体旋转角度，默认0度
                    // === 颜色效果设置 ===
                    brightness: 120,        // 亮度，取值0-200，默认100
                    contrast: 120,          // 对比度，取值0-200，默认100
                    saturation: 120,        // 饱和度，取值0-200，默认100
                    // === 渐变设置 ===
                    gradientStartColor: 'red',  // 渐变开始颜色，支持十六进制颜色值
                    gradientEndColor: 'red',    // 渐变结束颜色，支持十六进制颜色值
                    gradientDirection: 'backward',  // 渐变方向，可选 'forward' 或 'backward'，默认'forward'
                    enableGradient: false,  //

                    // === 流动方向设置 ===
                    flowDirection: 'forward',// 流动方向，可选 'forward' 或 'backward'，默认'forward'
                    // 翻转
                    flipX: false, // 水平翻转
                    flipY: true,  // 垂直翻转    
                    isStopped : true   // 是否停止流动(全屏后管道会消失)
                });
                // 第八负载电流 
                const flowEffect8 = new FlowEffectPlugin('flowContainer8', {
                    pipeWidth: 3,
                    pipeHeight: 3,
                    pipeColor: '#003366',
                    flowColor: 'red',
                    flowSpeed: 2,
                    flowWidth: 1,
                    segmentCount: 15,
                    segmentLength: 28,
                    segmentGap: 1,
                    shape: 'H',
                    horizontalLength: 25,
                    verticalLength: 140,
                    rotationAngle: 90,
                    brightness: 120,
                    contrast: 120,
                    saturation: 120,
                    energyLength: 10,
                    gradientDirection: 'forward',
                    gradientStartColor: 'red',  // 渐变开始颜色，支持十六进制颜色值
                    gradientEndColor: 'red',    // 渐变结束颜色，支持十六进制颜色值
                    flowDirection: 'forward',
                    enableGradient: false,  //
                    flipX: false,
                    flipY: false
                });
                // 创建第9个电网流动效果实例
                const flowEffect9 = new FlowEffectPlugin('flowContainer9', {
                    pipeWidth: 3,
                    pipeHeight: 3,
                    pipeColor: '#003366',
                    flowColor: 'red',
                    flowSpeed: 2,
                    flowWidth: 1,
                    segmentCount: 25,
                    segmentLength: 15,
                    segmentGap: 1,
                    shape: 'Z',
                    horizontalLength: 20,
                    verticalLength: 45,
                    rotationAngle: 0,
                    brightness: 120,
                    contrast: 120,
                    saturation: 120,
                    gradientStartColor: 'red',  // 渐变开始颜色，支持十六进制颜色值
                    gradientEndColor: 'red',    // 渐变结束颜色，支持十六进制颜色值
                    energyLength: 10,
                    gradientDirection: 'forward',
                    flowDirection: 'forward',
                    enableGradient: false,  //
                    flipX: false,
                    flipY: false
                });
                // 更新配置
                flowEffect1.updateConfig({
                    // flowSpeed: 5,      // 增加流动速度
                    // flowColor: 'yellow'  // 改变流动颜色为红色
                });
            }, 100); // 添加一个小延时确保DOM完全准备好





        });
    }
}
</script>